<template>
  <div id="zonghechart3">
    <div class="chart-title"><span>2025级</span>-能力达成分布图</div>
    <div
      class="chart3"
      ref="chart3"
    ></div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartDom: null,
      myChart: null,
    };
  },
  mounted() {
    this.initChartRadar();
  },
  methods: {
    initChartRadar() {
      this.chartDom = this.$refs.chart3;
      this.myChart = this.$echarts.init(this.chartDom);
      const data = [
        [111, 2, 55, 98],
        [2, 3, 66, 88],
        [23, 42, 77, 78],
        [4, 5, 88, 68],
        [53, 6, 99, 58],
        [6, 74, 99, 48],
        [7, 8, 99, 38],
        [8, 92, 99, 28],
      ];
      const option = {
        title: {
          text: "成绩/期望值",
          textStyle: {
            fontSize: 14,
            color: "#385899",
            fontWeight: 400,
          },
        },
        grid: {
          left: 59,
          right: 71,
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "rgba(114, 114, 114, 1)",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(238, 238, 238, 1)",
            },
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(238, 238, 238, 1)",
            },
          },
          axisLabel: {
            color: "rgba(114, 114, 114, 1)",
            fontSize: 14,
            fontWeight: 400,
          },
        },
        tooltip: {
          /*返回需要的信息*/
          formatter: function (param) {
            const val = param.value;
            console.log(val, 5534);
            return (
              '<div style="font-size: 14px;"> ' +
              val[2] +
              "(" +
              val[1] +
              ")" +
              "</div>"
            );
          },
        },
        series: [
          {
            symbol: "rect",
            symbolSize: 9,
            data: data,
            itemStyle: {
              color: "rgba(58, 114, 255, 1)",
            },
            markLine: {
              symbol: ["none", "none"],
              data: [
                {
                  type: "average",
                  label: {
                    position: "end",
                    formatter: "平均成绩",
                  },
                  lineStyle: {
                    color: "rgba(47, 168, 172, 1)",
                  },
                },
                {
                  yAxis: 1,
                  label: {
                    position: "end",
                    formatter: "期望值",
                  },
                  lineStyle: {
                    color: "rgba(56, 88, 153, 1)",
                  },
                },
              ],
              silent: true,
            },
            type: "scatter",
          },
        ],
      };

      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
#zonghechart3 {
  position: relative;
  .chart3 {
    width: 100%;
    height: 360px;
  }
  .chart-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #3a3a3a;
    > span {
      color: #1277eb;
    }
  }
}
</style>